<template>
  <div>
    <el-tabs
      v-model="type"
      class="custom-tabs"
    >
      <el-tab-pane label="待付账单" name="payment">
        <PaymentPane />
      </el-tab-pane>
      <el-tab-pane label="房间汇总" name="roomSummary">
        <RoomSummaryPane />
      </el-tab-pane>

    </el-tabs>
  </div>
</template>
<script setup name="Receivables">
import PaymentPane from './paymentPane.vue'
import RoomSummaryPane from './roomSummaryPane.vue'

const type = ref('payment')
</script>
<style lang="scss" scoped>
.custom-tabs {
  :deep(.el-tabs__nav-wrap) {
    &::after {
      height: 0;
    }
    .el-tabs__item.is-top:nth-child(2) {
      padding-left: 20px;
    }
    .el-tabs__active-bar {
      transform: translateX(20px);
    }
  }
}
</style>
